import { Route, Routes } from "react-router-dom"
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
import { lazy, Suspense } from "react"
// 自定义工具或组件
import { history } from './utils'
import { AuthRoute } from "@/components/AuthRoute"
// 懒加载组件
const Layout = lazy(() => import('./pages/Layout'))
const Login = lazy(() => import('./pages/Login'))
const Home = lazy(() => import('./pages/Home'))
const Article = lazy(() => import('./pages/Article'))
const Publish = lazy(() => import('./pages/Publish'))
function App () {
  return (
    <HistoryRouter history={history}>
      <Suspense fallback={
        <div
          style={{
            textAlign: 'center',
            marginTop: 200
          }}
        >
          loading...
        </div>
      }>
        <Routes>
          {/* 一级路由规则 */}
          {/* 需要路由权鉴 */}
          <Route path="/" element={
            <AuthRoute>
              <Layout />
            </AuthRoute>
          }>
            {/* 二级路由规则 */}
            <Route index element={<Home />}></Route>
            <Route path="article" element={<Article />}></Route>
            <Route path="publish" element={<Publish />}></Route>
          </Route>
          {/* 不要路由权鉴 */}
          <Route path="/login" element={<Login />}></Route>
        </Routes>
      </Suspense>
    </HistoryRouter>
  )
}

export default App
